<template>
  <view class="fu-collapse-item">
    <!-- 标题栏 -->
    <view 
      class="fu-collapse-item__header"
      :class="{ 'fu-collapse-item__header--expanded': isExpanded }"
      @click="onClick"
    >
      <view class="fu-collapse-item__title">
        <text v-if="showIcon" class="fu-collapse-item__icon fu-icon">{{ icon }}</text>
        <text>{{ title }}</text>
      </view>
      <text class="fu-collapse-item__arrow fu-icon">&#xe6e5;</text>
    </view>
    
    <!-- 内容区 -->
    <view 
      class="fu-collapse-item__wrapper"
      :class="{ 'fu-collapse-item__wrapper--expanded': isExpanded }"
    >
      <view class="fu-collapse-item__content" ref="content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * fu-collapse-item 折叠面板子组件
 * @description 折叠面板的可展开项
 * @property {String} name - 唯一标识符，默认为索引值
 * @property {String} title - 标题
 * @property {String} icon - 标题前图标
 * @property {Boolean} showIcon - 是否显示图标
 */
export default {
  name: 'fu-collapse-item',
  inject: ['collapse'],
  props: {
    name: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentName() {
      return this.name
    },
    isExpanded() {
      const { accordion, modelValue } = this.collapse
      if (accordion) {
        return modelValue === this.currentName
      }
      return Array.isArray(modelValue) ? modelValue.includes(this.currentName) : false
    }
  },
  methods: {
    onClick() {
      if (!this.name) {
        console.warn('[fu-collapse-item] name is required')
        return
      }
      this.collapse.switch(this.currentName, !this.isExpanded)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-collapse-item {
  &__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    line-height: 1.5;
    background-color: #fff;
    cursor: pointer;
    
    &::after {
      content: '';
      position: absolute;
      left: 32rpx;
      right: 32rpx;
      bottom: 0;
      height: 2rpx;
      background-color: var(--fu-border-color);
      transform: scaleY(0.5);
    }
    
    &:active {
      background-color: #f5f5f5;
    }
    
    &--expanded {
      .fu-collapse-item__arrow {
        transform: rotate(180deg);
      }
    }
  }
  
  &__title {
    display: flex;
    align-items: center;
    color: var(--fu-text-color);
  }
  
  &__icon {
    font-family: 'fuIcon';
    font-size: 32rpx;
    margin-right: 12rpx;
  }
  
  &__arrow {
    font-family: 'fuIcon';
    font-size: 32rpx;
    color: var(--fu-text-color-secondary);
    transition: transform 0.3s;
  }
  
  &__wrapper {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    
    &--expanded {
      max-height: 1000px;
    }
  }
  
  &__content {
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    line-height: 1.5;
    color: var(--fu-text-color-secondary);
    background-color: #fff;
    overflow: hidden;
  }
}
</style> 